<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="background-color: rgb(0, 149, 120)">
            <h1 style="font-size: 22px;color: white">
                旺旺百货商城后台管理系统
                <span style="float: right;font-size: 15px">欢迎回来!
                    <a href="#" @click="logout()">退出登录</a>
                </span>
            </h1>
        </el-header>
        <el-container>
            <el-aside>
                <el-menu
                class="el-menu-vertical-demo"
                @select="menuChange">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            用户管理
                        </template>
                        <el-menu-item index="1-1">用户列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            会员管理
                        </template>
                        <el-menu-item index="2-1">会员列表</el-menu-item>
                        <el-menu-item index="2-2">添加会员</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-s-flag"></i>
                            分类管理
                        </template>
                        <el-menu-item index="3-1">分类列表</el-menu-item>
                        <el-menu-item index="3-2">添加分类</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-shopping-cart-2"></i>
                            商品管理
                        </template>
                        <el-menu-item index="4-1">商品列表</el-menu-item>
                        <el-menu-item index="4-2">添加商品</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
<!--                用户列表开始-->
                <el-table v-if="selectedIndex=='1-1'" :data="userArr" :default-sort = "{prop: 'recordDate', order: 'descending'}">
                    <el-table-column type="index" label="编号"
                                     width="140"></el-table-column>
                    <el-table-column label="用户名" prop="username"></el-table-column>
                    <el-table-column label="密码" prop="password"></el-table-column>
                    <el-table-column label="昵称" prop="nick"></el-table-column>
                    <el-table-column label="消费总额" prop="consumption" sortable></el-table-column>
                    <el-table-column label="注册日期" prop="recordDate" sortable></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popconfirm @confirm="userDelete(scope.$index, scope.row)"
                                           title="确定删除用户！">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
<!--                用户列表结束-->
<!--                会员列表开始-->
                <el-table v-if="selectedIndex=='2-1'" :data="memberArr">
                    <el-table-column type="index" label="编号"
                                     width="140"></el-table-column>
                    <el-table-column label="会员名称" prop="name"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popconfirm @confirm="memberDelete(scope.$index, scope.row)"
                                           title="确定删除该会员类别！">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
<!--                会员列表结束-->
<!--                分类列表开始-->
                <el-table v-if="selectedIndex=='3-1'" :data="categoryArr">
                    <el-table-column type="index" label="编号"
                                     width="140"></el-table-column>
                    <el-table-column label="分类名称" prop="name"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popconfirm @confirm="categoryDelete(scope.$index, scope.row)"
                                           title="确定删除分类！">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
<!--                分类列表结束-->
<!--                商品列表开始-->
                <el-table v-if="selectedIndex=='4-1'" :data="productArr">
                    <el-table-column type="index" label="编号"
                                     width="80"></el-table-column>
                    <el-table-column label="商品标题" prop="title"></el-table-column>
                    <el-table-column label="商品图片" >
                        <template slot-scope="scope">
                            <img :src="scope.row.url"  alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="价格" prop="price" sortable></el-table-column>
                    <el-table-column label="访问量" prop="view_count" sortable></el-table-column>
                    <el-table-column label="销量" prop="sale_count" sortable></el-table-column>
                    <el-table-column label="发布日期" prop="created" sortable width="150"></el-table-column>
                    <el-table-column label="类别" prop="categoryId"></el-table-column>
                    <el-table-column label="属性" prop="attribute"
                                     :filters="[{ text: '会员', value: '会员' }, { text: '普通', value: '普通' }]"
                                     :filter-method="filterAttribute"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popconfirm @confirm="productDelete(scope.$index, scope.row)"
                                           title="确定删除该商品！">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
<!--                商品列表结束-->
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                userArr:[{id:99,username:'dd',password:'sf',nick:'sf'}],
                categoryArr:[{id:9,name:'服装'}],
                selectedIndex:'',
                memberArr:[],
                productArr:[]
            }
        },
        created:function (){
            axios.get("/user/select").then(function (response){
                v.userArr=response.data;
            })
            axios.get("/category/select").then(function (response){
                v.categoryArr=response.data;
            })
            axios.get("/member/select").then(function (response){
                v.memberArr=response.data;
            })
            axios.get("/product/select").then(function (response){
                v.productArr=response.data;
            })
        },
        methods:{
            menuChange(index){
                console.log(index);
                if (index=="3-2"){
                    //弹出输入框
                    v.$prompt("请输入分类名称","提示",{
                        confirmButtonText:"确定",
                        cancelButtonText:"取消"
                    }).then(function (object) {
                        console.log("分类名称:"+ object.value);
                        let name = object.value;
                        if (name==null||name.trim()==""){
                            v.$message.error("分类名称不能为空");
                            return;
                        }
                        axios.get("/category/insert?name="+name).then(function (response) {
                            location.reload();
                        })
                        //catch方法如果不加 当点击取消时会报错.
                    }).catch(function () {
                        console.log("取消了");
                    })
                }else if (index=="2-2"){
                    //弹出输入框
                    v.$prompt("请输入会员名称","提示",{
                        confirmButtonText:"确定",
                        cancelButtonText:"取消"
                    }).then(function (object) {
                        console.log("会员名称:"+ object.value);
                        let name = object.value;
                        if (name==null||name.trim()==""){
                            v.$message.error("会员名称不能为空");
                            return;
                        }
                        axios.get("/member/insert?name="+name).then(function (response) {
                            location.reload();
                        })
                        //catch方法如果不加 当点击取消时会报错.
                    }).catch(function () {
                        console.log("取消了");
                    })
                }else if(index=='4-2'){
                    location.href="/insertProduct.html"
                } else{
                    v.selectedIndex = index;
                }
            },
            userDelete(index,user){
                axios.get("/user/deleteById?id="+user.id).then(function (){
                    v.userArr.splice(index,1);
                })
            },
            categoryDelete(index,category){
                axios.get("/category/deleteById?id="+category.id).then(function (){
                    v.categoryArr.splice(index,1);
                })
            },
            memberDelete(index,member){
                axios.get("/member/deleteById?id="+member.id).then(function (){
                    v.memberArr.splice(index,1);
                })
            },
            productDelete(index,product){
                axios.get("/product/deleteById?id="+product.id).then(function (){
                    v.productArr.splice(index,1);
                })
            },
            filterAttribute(value, row) {
                return row.attribute === value;
            },
        }
    })
</script>
</html>